<template>
  <el-dialog :append-to-body="true" :close-on-click-modal="false" :visible.sync="visable" title="上传导入" width="500px" @close="closeDlg">
    <div v-if="!started">
      <el-upload
        ref="upload"
        :headers="headers"
        :action="url"
        :file-list="fileList"
        :auto-upload="false"
        :multiple="false"
        accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        :limit="1"
        :before-upload="beforeUpload"
        :on-error="handleUploadError"
        :on-success="handleUploadSuccess"
      >
        <el-button slot="trigger" size="small" type="primary">请选取文件</el-button>
        <div slot="tip" class="el-upload__tip">只能上传xls/xlsx文件，且不超过30M</div>
      </el-upload>
      <p>
        <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传并导入</el-button>
      </p>
    </div>
    <div v-if="started">
      <p><i v-if="!completed" class="el-icon-loading" /> &nbsp;&nbsp;{{ message }}</p>

      <div>
        <p>总数：{{ impresult.count }}，成功： {{ impresult.success }}，失败： {{ impresult.failure }} </p>
        <a v-if="impresult.resultFile && impresult.resultFile.length>0" :href="impresult.resultFile" target="_blank" style="color:blue;">==》失败的记录xlsx文件,请‘右点击>另存链接，下载’改正，再导入！</a>
      </div>
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  name: 'SynUploadForm',
  data() {
    return {
      headers: {
        'Authorization': 'Bearer ' + getToken()
      },
      impresult: {
        percentage: 0,
        id: null,
        resultFile: null,
        count: 0,
        success: 0,
        failure: 0
      },
      message: '正在导入请稍候...',
      visable: false,
      started: false,
      completed: false,
      url: null,
      form: {
        id: null
      },
      fileList: []
    }
  },

  methods: {
    resetFields() {
      this.message = '正在导入请稍候...'
      this.form.id = null
      this.started = false
      this.completed = false
      this.url = null
      this.fileList = []
      this.impresult = {
        percentage: 0,
        id: null,
        resultFile: null,
        count: 0,
        success: 0,
        failure: 0
      }
    },
    cancel() {
      this.closeDlg()
    },
    show(url) {
      this.started = false
      this.url = url
      this.visable = true
    },
    beforeUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 30
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 30MB!')
        this.started = false
        this.completed = false
      }
      return isLt2M
    },
    handleUploadError: function(e) {
      // console.log(e)
      try {
        const ms = JSON.parse(e.message)
        this.$message.error('导入失败！' + ms.message)
      } catch (ex) {
        this.$message.error('导入失败！' + e)
      }
    },
    handleUploadSuccess: function(res, file, fileList) {
      // console.log(res)
      this.completed = true
      this.message = '导入完成！'
      this.impresult.success = res.data.success
      this.impresult.failure = res.data.failure
      this.impresult.resultFile = res.data.resultFile
    },

    submitUpload() {
      this.message = '正在导入请稍候...'
      this.started = true
      this.completed = false
      this.$refs.upload.submit()
    },
    closeDlg() {
      this.visable = false
      this.resetFields()
      this.$parent.getList() // refrsh
    }
  }
}
</script>
